<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String basePath = request.getScheme() +
            "://"
            + request.getServerName() + ":"
            + request.getServerPort()
            + request.getContextPath() + "/";
    int index=1;
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <script type="text/javascript" src="jquery/jquery-2.1.1.min.js"></script>
    <style>
        .submitted .right {
            color: #00B83F;
        }
        .submitted .wrong {
            color: #b92c28;
        }
    </style>
    <script>
        $(function () {
            $("#returnBtn").click(function (){
                window.location.href="toView/workbench/student/consolidationExercises/consolidationExercises";
            })
            $("#submitBtn").click(function (){
                let data=$("#answers").serialize();
                console.log(data)
                let question = $(".question")
                if (data==null || data=='' || data.split("&").length < question.length) {
                    alert("您必须完成所有答题才能提交")
                } else if (confirm("您确定要提交试卷吗")) {
                    $(".question").addClass("submitted")
                    $("#submitBtn").attr('disabled', "true")
                    $.ajax({
                        url: "workbench/student/exercise/saveExercise.do",
                        data: data,
                        type: "post",
                        dataType: "json",
                        success: function (data){
                            console.log(data)
                        }
                    })
                }
            })
        })
    </script>
</head>
<body>
<form id="answers" action="" method="post">
    <c:forEach items="${exerciseList}" var="n" >
        <br> <br>
        <hr>
        <div id="${n.qid}" style="position: relative;left: 350px" class="question">
            <div style="position: relative;top: 15px;">
                <span id="q${n.qid}"><%=index++%>.  </span>
                <span>${n.head}  </span>
                <span> (    )  (10分）</span>
            </div>
            <br>
            <div style="position: relative;top: 10px;" class="${n.right_answer=='A'?'right':'wrong'}">
                <span><input type="radio" name="answer_${n.qid}" value="A" style="width:15px;height: 15px;"></span>
                <span>A.     </span>
                <span>${n.answerA}</span>
            </div>
            <br>
            <div style="position: relative;top: 10px;" class="${n.right_answer=='B'?'right':'wrong'}">
                <span><input type="radio" name="answer_${n.qid}" value="B" style="width:15px;height: 15px;"></span>
                <span>B.     </span>
                <span>${n.answerB}</span>
            </div>
            <br>
            <div style="position: relative;top: 10px;"  class="${n.right_answer=='C'?'right':'wrong'}">
                <span><input type="radio" name="answer_${n.qid}" value="C" style="width:15px;height: 15px;"></span>
                <span>C.     </span>
                <span>${n.answerC}</span>
            </div>
            <br>
            <div style="position: relative;top: 10px;"  class="${n.right_answer=='D'?'right':'wrong'}">
                <span><input type="radio" name="answer_${n.qid}" value="D" style="width:15px;height: 15px;"></span>
                <span>D.     </span>
                <span>${n.answerD}</span>
            </div>
        </div>
    </c:forEach>
</form>
<div style="margin-top: 20px;">
    <button style="position: relative;left: 600px;width: 60px;height: 40px" id="returnBtn">返回</button>
    <button style="position: relative;left: 600px;width: 60px;height: 40px" id="submitBtn">交卷</button>
</div>
</body>
</html>